<!--
 * @Description: 数据卡片
 * @Author: Huang Junjie
 * @Date: 2021-06-01 16:24:16
 * @LastEditTime: 2021-08-05 16:24:31
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div style="data-card-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <el-row>
        <el-col class="left-col" :span="10">
          <img class="img" :src="require('@/assets/images/jjxt/production-safety/segment-level-home/card-icon.png')">
        </el-col>
        <el-col class="right-col" :span="14">
          <div class="text-one">{{ getDatatimeChinese(new Date(), 0, 11) }}</div>
          <div class="hr" />
          <div class="text-two">
            <el-row>
              <el-col :span="12">
                <div class="name-text">
                  <!-- {{ resData.leader }} -->
                  <scroll
                    :data="resData.leader"
                    :class-option="{limitMoveNum: 2, singleHeight: resDataItemHeight, waitTime: 3000}"
                    class="electricity-seamless-scroll"
                    style="height:100%;overflow:hidden;"
                  >
                    <div
                      v-for="(item, index) in resData.leader"
                      :key="index"
                      class="name-text-item data-item-scroll"
                    >
                      {{ item }}
                    </div>
                  </scroll>
                </div>
                <div class="job-text">值班领导</div>
              </el-col>
              <el-col :span="12">
                <div class="name-text">
                  <!-- {{ resData.cadre }} -->
                  <scroll
                    :data="resData.cadre"
                    :class-option="{limitMoveNum: 2, singleHeight: resDataItemHeight, waitTime: 3000}"
                    class="electricity-seamless-scroll "
                    style="height:100%;overflow:hidden;"
                  >
                    <div
                      v-for="(item, index) in resData.cadre"
                      :key="index"
                      class="name-text-item data-item-scroll"
                    >
                      {{ item }}
                    </div>
                  </scroll>
                </div>
                <div class="job-text">值班干部</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getLeadingCadresData } from '@/api/jjxt/production-safety/segment-level-home';
import { getDatatimeChinese } from '@/utils';
import Scroll from 'vue-seamless-scroll';

export default {
  components: { Scroll },
  data() {
    return {
      resDataItemHeight: 64,
      // 返回值
      resData: {
        leader: [],
        cadre: []
      }
    };
  },
  mounted() {
    this.getLeadingCadresData(); // 查询值班领导值班干部信息
  },
  methods: {
    getDatatimeChinese,

    // 查询值班领导值班干部信息
    getLeadingCadresData() {
      getLeadingCadresData().then(res => {
        this.resData = {
          leader: res.data.leader || [],
          cadre: res.data.cadre || []
        };
        this.$nextTick(() => {
          if (document.getElementsByClassName('data-item-scroll')[0]) {
            this.resDataItemHeight = document.getElementsByClassName('data-item-scroll')[0].clientHeight;
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.data-card-style {
  position: relative;
  color: white;
  width: 454px;
  height: 170px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0a1944, $alpha: 0.9);
    box-sizing: border-box;
    .left-col {
      height: 170px;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 110px;
      }
    }
    .right-col {
      text-align: center;
      .text-one {
        font-size: 24px;
        margin-top: 25px;
        line-height: 40px;
      }
      .hr {
        margin: 0 auto;
        background-color: #0e224d;
        height: 1px;
        width: 80%;
      }
      .text-two {
        .name-text {
          height: 64px;
          color: #3695ff;
          font-size: 24px;
          line-height: 50px;
          .name-text-item {
            line-height: 64px;
          }
        }
        .job-text {
          color: #ffffff;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
